<template>
  <!-- 步骤条   -->
  <el-steps :active="$store.state.base.active">
    <el-step title="步骤1" description="确认商铺信息" />
    <el-step title="步骤2" description="选择业主" />
    <el-step title="步骤3" description="设置费用" />
  </el-steps>
  <!-- 第一步操作的弹出层内容 -->
  <el-form v-if="$store.state.base.active === 0" ref="ruleFormRef1" :model="ruleform1" :rules="rules1" label-width="132px"
    class="demo-ruleForm" status-icon>
    <el-form-item label="商业区" prop="quming">
      <el-input disabled="disabled" v-model="ruleform1.quming" />
    </el-form-item>
    <el-form-item label="编号" prop="cid">
      <el-input disabled="disabled" v-model="ruleform1.cid" />
    </el-form-item>
    <el-form-item label="类别" prop="type">
      <el-input disabled="disabled" v-model="ruleform1.type" />
    </el-form-item>
    <el-form-item label="开始时间" prop="startTime">
      <el-date-picker value-format="YYYY-MM-DD" v-model="ruleform1.startTime" type="date" placeholder="请选择一个日期" />
      <!-- <el-input v-model="ruleform1.startTime" /> -->
    </el-form-item>
  </el-form>
  <!-- 第二步操作的弹出层内容 -->
  <el-form v-if="$store.state.base.active === 1" ref="ruleFormRef2" :model="userForm1" label-width="132px" class="demo-ruleForm"
    status-icon>
    <el-form-item label="客户公司" prop="gsiming">
      <el-input style="width:223px" disabled="disabled" v-model="userForm1.gsiming" />
      <el-button type="primary">选择业主公司</el-button>
    </el-form-item>
    <el-form-item label="联系人姓名" prop="name">
      <el-input disabled="disabled" v-model="userForm1.name" />
    </el-form-item>
    <el-form-item label="身份证" prop="cart">
      <el-input disabled="disabled" v-model="userForm1.cart" />
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-input disabled="disabled" v-model="userForm1.sex" />
    </el-form-item>
    <el-form-item label="联系方式" prop="phone">
      <el-input disabled="disabled" v-model="userForm1.phone" />
    </el-form-item>
    <el-form-item label="从事的行业" prop="hanye">
      <el-input disabled="disabled" v-model="userForm1.hanye" />
    </el-form-item>
    <el-form-item label="详细说明" prop="datailCon">
      <el-input v-model="userForm1.datailCon" />
    </el-form-item>
  </el-form>
    <!-- 第三步操作的弹出层内容 -->
  <div v-if="$store.state.base.active === 2" class="tableDiv">
    <div class="pdiv">
      <p>设置收费项目</p>
    </div>
    <el-table :data="getMoney" style="width: 100%">
      <el-table-column prop="num" label="序号" width="70" />
      <el-table-column prop="name" label="收费项目" />
      <el-table-column prop="price" label="单价" />
      <el-table-column label="操作">
        <template #default>
         <el-button text size="samll" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button style="margin-left: 153px;;margin-top:10px">+ 新增收费项</el-button>
  </div>
  <!-- 当到达第三步时，下一步按钮变为确认按钮 -->
  <div style="display:flex;justify-content: center;position: relative;">
    <div style="display:flex;">
      <el-button v-if="$store.state.base.active > 0" style="margin:12px;" @click="next1">上一步</el-button>
      <el-button v-if="$store.state.base.active < 2" style="margin:12px;" @click="next2">下一步</el-button>
      <el-button v-if="$store.state.base.active === 2" type="primary" style="margin:12px;">确认</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['form1', 'form2', 'getmoney'],
  data () {
    return {
      getMoney: [],
      // active: 0,
      ruleform1: this.form1,
      userForm1: {
        ...this.form2,
        datailCon: ''
      },
      rules1: {
        type: [
          { required: true, message: '请输入类别', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请输入开始时间', trigger: 'blur' }
        ]
      },
      totalForm: {
        ...this.ruleform1,
        ...this.userForm1
      }
    }
  },
  methods: {
    next1 () {
      this.$store.commit('base/JIAN_NUM')
    },
    next2 () {
      // console.info(this.ruleform1.startTime.getFullYear())
      // console.info(this.ruleform1.startTime.getMonth() + 1)
      // console.info()
      this.$store.commit('base/INIT_NUM')
    }
  },
  watch: {
    form1: {
      immediate: true,
      deep: true,
      handler (newval) {
        this.ruleform1 = newval
      }
    },
    form2: {
      immediate: true,
      deep: true,
      handler (newval) {
        console.log(newval)
        this.userForm1 = newval
      }
    },
    getmoney: {
      immediate: true,
      deep: true,
      handler (newval) {
        console.log(newval)
        this.getMoney = newval
      }
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-table .el-table__header-wrapper th) {
background-color: #f5f7fa;
  font-weight: 400;
  text-align: center;
}
:deep(.el-table--enable-row-transition .el-table__body td) {
  text-align: center;
  font-size: 12px;

}
.tableDiv {
  width: 443px;
  height: 343px;
  // background-color: red;
  margin-left: 75px;
  overflow-y: auto;
  .pdiv {
    height: 40px;
    border-bottom: 2px solid #f1f1f1;
    box-sizing: border-box;
    margin-bottom: 10px;

    p {
      height: 40px;
      width: 84px;
      line-height: 40px;
      color: #409EFF;
      border-bottom: 2px solid #409EFF;
      box-sizing: border-box;
    }
  }

}

.el-steps {
  width: 409px;
  margin-left: 83px;
  margin-bottom: 31px;
}

:deep(.el-form-item__content) {
  flex: none;
  width: 340px;
}
</style>
